<template>
  <div>
    <el-form :inline="true" :model="formInline" ref="formInline" class="form form-style">
      <el-form-item prop="name" style="margin:15px 0 15px 30px">
        <el-input v-model="formInline.name" placeholder="团长姓名"></el-input>
      </el-form-item>
      <el-form-item prop="phoneNumber" style="margin:15px 0 15px 30px">
        <el-input v-model="formInline.phoneNumber" placeholder="团长手机号"></el-input>
      </el-form-item>
      <el-form-item prop="createTime" style="margin:15px 0 15px 30px">
        <el-date-picker
          type="date"
          v-model="formInline.createTime"
          @change="getSTime"
          placeholder="选择创建时间"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item style="margin:15px 0 15px 30px">
        <el-button icon="el-icon-refresh" type="warning" @click="clean('formInline')">重置</el-button>
        <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-style table">
      <el-table :data="tableData" border>
        <el-table-column prop="TrueName" label="申请人"></el-table-column>
        <el-table-column prop="PhoneNumber" label="手机号码"></el-table-column>
        <el-table-column  label="提现金额">
          <template slot-scope="scope">
            <p style="color:red">￥{{scope.row.AllPrice}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="TakeTime" label="结算日期" width="150"></el-table-column>
        <el-table-column prop="IsCheckStr" label="状态" >
          <template slot-scope="scope">
            <p v-show="scope.row.IsCheckStr === '已通过'" style="color:green">已完成</p>
            <p v-show="scope.row.IsCheckStr === '未审核'" style="color:red">未完成</p>
          </template>
        </el-table-column>
        <el-table-column  label="审核时间" width="160">
          <template slot-scope="scope">
            <div v-if="scope.row.CheckTime ===''">--</div>
            <div v-else>{{scope.row.CheckTime}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" width="200">
          <template slot-scope="scope">
            <div v-show="scope.row.IsCheckStr === '已通过'">
            <el-button type="primary" size="mini" @click="GoSetPage(scope.$index,scope.row)">结算详情</el-button>
            </div>
            <div v-show="scope.row.IsCheckStr === '未审核'">
             <el-button type="warning" size="mini">审核</el-button>
             <el-button type="primary" size="mini" @click="GoSetPage(scope.$index,scope.row)">结算详情</el-button>

            </div>
          </template>
        </el-table-column>
      </el-table>
      <botpage
      class="botpage-style"
      :currentPage="currentPage"
      :pageSize="pageSize"
      :total="total"
      @handleCurrentChange="currentChange"
      @pageSizeChange="pageSizeChange"
    />
    </div>
  </div>
</template>

<script>
import Botpage from "@/components/botpage/Botpage";
import { LoadWithdrawCheck } from "@/request/api";
export default {
  created() {
    this.getTableDatas();
  },
  methods: {
    getTableDatas() {
      LoadWithdrawCheck({
        SreachValues: this.formInline.name,
        PageIndex: this.currentPage,
        PageSize: this.pageSize,
        OS: "PC",
        CustomerId: 1,
      })
        .then((res) => {
           if (res.StatusCode === 200) {
          this.currentPage = res.PageIndexs;
          this.pageSize = res.PageCount;
          this.tableData = res.Data;
          this.total = res.DataCounts;
          var that = this;
          for (let i in this.tableData) {
           that.tableData[i].CheckTime = this.tableData[i].CheckTime.replace(/(\/)/g,'-');
           console.log(that.tableData[i].CheckTime)
         }
           }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async GoSetPage(index,row) {
      let busDel = this.tableData[index];
      console.log(busDel)
      this.$router.push({
        path:"/settlement",
        query:{detail:this.tableData[index]}
      })
    },
    search() {
      this.getTableDatas();
    },
    clean(formInline) {
      this.$refs[formInline].resetFields();
      this.getTableDatas()
    },
    currentChange(event) {
      console.log(event);
      this.currentPage = event;
      this.getTableDatas();
    },
    pageSizeChange(event) {
      this.pageSize = event;
      this.getTableDatas();
    },
    getSTime(val){
      this.formInline.createTime = val
    }
  },
  components: {
    Botpage,
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 1,
      formInline: {},
      tableData: [],
    };
  },
};
</script>

<style lang="less" scoped>
.form{
  width: 96%;
  margin:0 auto;
}
.table {
  width: 96%;
  margin: 30px auto;

}
</style>